<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/listPage.css" />
		<link rel="stylesheet" type="text/css" href="css/login.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="shortcut icon" type="image/x-icon" href="img/3.ico" media="screen" />
	</head>

	<body>
		<div class="listPage-mainBody">
			<div class="listPage-mainBody-wrapper">
				<ul class="listPage-mainBody-wrapper-crumbs">
					<li>
						<a href="index.html">暴风商城</a>
					</li>

				</ul>
			</div>
			<div class="listPage-mainBody-wrapper">
				<div class="listPage-mainBody-wrapper-filter">
					<!--<div class="wrapper-filter-type">
						<span style="line-height: 50px;float: left;margin-right: 20px;">分类：</span>
						<ul class="listPage_typelist">

						</ul>
					</div>-->
					<div class="wrapper-filter-line"></div>
					<div class="wrapper-filter-scort">
						<span style="line-height: 50px;float: left;margin-right: 20px;">排序：</span>
						<ul class="listPage_scortlist">
							<li class="listPage_scortlist_ontime current" data-id="1">上架时间</li>
							<li class="listPage_scortlist_sales " data-id="2">销量</li>
							<li class="listPage_scortlist_price" data-id="3">价格</li>
							<div style="clear: both;"></div>
						</ul>
					</div>
				</div>
			</div>
			<div class="listPage-mainBody-wrapper">
				<ul class="listPage_prolist">

				</ul>
			</div>

		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" cha rset="utf-8"></script>
		<script src="js/alertLogin.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/header.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/addheader.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
                $("body").addHeader()

				//面包削
				//取传过来的id
				var getQueryParams = function(key) {
					if(!location.search) return null
					var str = location.search.substring(1)
					var arr = str.split('&')
					if(arr.length === 0) return null
					for(var i = 0; i < arr.length; i++) {
						var itemarr = arr[i].split('=')
						if(itemarr[0] === key) {
							return itemarr[1]
						}
					}
				}
                
                var dd=getQueryParams("id")
                
				$.get("/listbreadnav", {
					id:dd
					
				}, function(data) {
					
					switch(data.parentid) {
						case 1:
							str = `
									<li><i class="listPage-mainBody-wrapper-crumbs_icon"></i>
						            </li>
					                <li>
						            <a href="listPage.html">暴风魔镜</a>
					                </li>
									`
							break;
						case 17:
							str = `
									<li><i class="listPage-mainBody-wrapper-crumbs_icon"></i>
						            </li>
					                <li>
						            <a href="#">暴风VIP</a>
					                </li>
									`
							break;
						default:
						    str = `
									<li><i class="listPage-mainBody-wrapper-crumbs_icon"></i>
						            </li>
					                <li>
						            <a href="listPage2.html">暴风周边</a>
					                </li>
									`
					}

					str += `
						<li><i class="listPage-mainBody-wrapper-crumbs_icon"></i>
						</li>
					    <li>
						<a href="#">${data.name}</a>
					    </li>
					`

					$(".listPage-mainBody-wrapper-crumbs").append(str)
					
				})
				
				var loadlistPage = function() {
					var typelistid = $(".listPage_typelist li.current").data("id")
					var priceid = $(".listPage_scortlist li.current").data("id")
					$(".listPage_prolist").empty()
				
				$.get("/getid", {
					id:dd
					
				}, function(data) {
					
					var typeid = data.typeid
					console.log(typeid)
					$.post("/circums", {		
								typeid: typeid
							}, function(data) {
								console.log(data)
								if(priceid === 3) {
							for(var i = 0; i < data.length - 1; i++) {
								for(var j = 0; j < data.length - 1 - i; j++) {
									if(data[j].unitPrice > data[j + 1].unitPrice) {
										var temp = data[j]
										data[j] = data[j + 1]
										data[j + 1] = temp
									}
								}
							}
							console.log(data)
						} else if(priceid === 2) {
							for(var i = 0; i < data.length - 1; i++) {
								for(var j = 0; j < data.length - 1 - i; j++) {
									if(data[j].volume > data[j + 1].volume) {
										var temp = data[j]
										data[j] = data[j + 1]
										data[j + 1] = temp
									}
								}
							}
						}
								var str = ``

						data.forEach(function(item) {
							str += `
							<li>
						<a href="DetailPages.html?id=${item.id}" class="listPage_prolist_product">
							<img src="${item.img}"  class="listPage_prolist_bac"/>
							<div class="listPage_prolist_info">
								<span style="color: #e73d4d;display: block;width: 100%;height: 24px;text-align: center;line-height: 24px;">${item.unitPrice}元&nbsp;&nbsp;
								<span style="color: #999;text-decoration: line-through;">${item.oldPrice}元</span>
								</span>
								<strong class="listPage_prolist_info_pname">${item.title}</strong>
							</div>
							<div class="listPage_prolist_button">
								<span class="listPage_prolist_button_buy">立即购买</span>
							    <span class="listPage_prolist_button_like" data-id="${item.id}">
							    	<i class="listPage_prolist_button_like_icon hate"  data-id="${item.id}"></i>
							    	喜欢</span>
							</div>
							
						<i class="listPage_prolist_showlogist" style="background:url(${item.state})";>${item.stateWord}</i>
										
						</a>
					</li>
							`

						})
						$(".listPage_prolist").append(str)
								
							})
					
					
				})
				}
				loadlistPage()
				$(".listPage_scortlist").on("click", "li", function() {
					$(this).addClass("current").siblings().removeClass("current")
					loadlistPage()
				})
				 var userid = $.cookie("userId")
				//点击喜欢按钮弹出登陆注册框
				$(".listPage_prolist").on("click", ".listPage_prolist_button_like", function(e) {
					e.stopPropagation()
					e.preventDefault()
					var goodsid = $(this).data("id")
					
					
					if($.cookie("userId")) {
						if($(this).children("i.listPage_prolist_button_like_icon").hasClass("hate")) {
							$(this).children("i.listPage_prolist_button_like_icon").addClass("like").removeClass("hate");
							$.post("/goodslikeadd", {
								userid: userid,
								goodsid: goodsid
							}, function(data) {
								console.log(data.msg)
							})
						} else {
							$(this).children("i.listPage_prolist_button_like_icon").addClass("hate").removeClass("like");
							$.post("/goodslikedel", {
								userid,
								goodsid
							}, function(data) {
								console.log(data.msg)
							})
						}

					} else {
						$("body").alertLogin('listPage.html')

					}

				})
				
				//页面加载时加载喜欢
				$.get("/goodslike", {
				userid: userid
			   }, function(data) {
				console.log(data)
				data.forEach(function(item2) {
					console.log(item2.id)
					$(".listPage_prolist_button_like_icon").each(function(i, item) {
						console.log($(item).data("id"))
						if($(item).data("id") === item2.id) {
							$(item).addClass("like").removeClass("hate")
						}
					})
				})
			})

			})
		</script>

	</body>

</html>